import React from 'react';
import { Tabs } from 'weaver-mobile';
import { forwardViewForm, forwardViewPage } from '../../../../../workflowForm/util/forwardPage';
import { openLink } from '../../../../util';
import * as API_HOMEPAGE from '../../../../apis/homepage';
import Loading from '../../Loading';

class Workflow extends React.Component {
  constructor(props) {
    super(props);
    this.onLoadData = this.onLoadData.bind(this);
    this.onLoadMoreData = this.onLoadMoreData.bind(this);
    this.onTouchStart = this.onTouchStart.bind(this);
    this.onTouchMove = this.onTouchMove.bind(this);
    this.onTouchEnd = this.onTouchEnd.bind(this);
    this.onOpenHrm = this.onOpenHrm.bind(this);
    this.onOpen = this.onOpen.bind(this);
    this.onOpenCallback = this.onOpenCallback.bind(this);
    this.state = {
      loading: false,
      loading2: false,
      visible2: false,
      tabs: [],
      tab: {},
      pagenum: 1,
      result: {}
    };
  }

  componentWillMount() {
    const { tabs } = this.props;
    if (tabs && tabs.length) {
      const tab = tabs[0];
      this.setState({ tabs });
      this.onLoadData(tab);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.refreshing) {
      const { tabs } = nextProps;
      if (tabs && tabs.length) {
        const tab = tabs[0];
        this.setState({ tabs });
        this.onLoadData(tab);
      }
    }
  }

  render() {
    const { loading, loading2, visible2, tabs = [], tab = {}, result = {} } = this.state;
    const { data = [] } = result;

    let tabsCom = null;
    if (tabs && tabs.length > 1) {
      let page = 0;
      for (let i = 0, len = tabs.length; i < len; i++) {
        if (tabs[i].tabid == tab.tabid) {
          page = i;
          break;
        }
      }
      tabsCom = <Tabs tabs={tabs} page={page} renderTabBar={props => <Tabs.ExpandTabBar {...props} fix={8} />} onTabClick={item => this.onLoadData(item)} />;
    }

    let moreCom = null;
    if (visible2) {
      moreCom = (
        <div className="more">
          <Loading loading={loading2}>
            <div className="icon-more" onClick={this.onLoadMoreData} />
          </Loading>
        </div>
      );
    }

    return (
      <div className="content workflow">
        {tabsCom}
        <div className="data">
          <Loading loading={loading}>
            <ul className="data-ul">
              {data.map((item, index) => {
                const { requestname = {}, creater = {} } = item;
                const { pretitle, name: title, img: titleFlag, mobilelink, requestid } = requestname;
                const { userid, name: createrName } = creater;
                let tit=pretitle + title;
                if(typeof tit === "number" ){tit='';}else{tit=pretitle + title;}
                return (
                  <li
                    key={index}
                    ref={`li-${index}`}
                    onTouchStart={() => this.onTouchStart(index)}
                    onTouchMove={() => this.onTouchMove()}
                    onTouchEnd={() => this.onTouchEnd(index)}
                    onClick={() => this.onOpen(mobilelink, requestid)}
                  >
                    <div className="title-div">
                      <span className="title" style={item.importantleve ? { maxWidth: '85%' } : {}} dangerouslySetInnerHTML={{ __html: tit }} ></span>
                      {titleFlag && <img src={titleFlag} alt="" className="title-flag" />}
                      <span className="title-level">{item.importantleve}</span>
                    </div>
                    <div className="info-div">
                      <div className="info-div-items">
                        <div className="info-div-item info-div-user" onClick={(e) => this.onOpenHrm(e, userid)}>{createrName}</div>
                        <div className="info-div-item">{item.createrDept}</div>
                        <div className="info-div-item">{item.receivedate}</div>
                        <div className="info-div-item">{item.receivetime}</div>
                        <div className="info-div-item">{item.createdate}</div>
                        <div className="info-div-item">{item.createtime}</div>
                        <div className="info-div-item">{item.operatedate}</div>
                        <div className="info-div-item">{item.operatetime}</div>

                        <div style={{float:'left',width:'inherit'}}>
                        <div className="info-div-item">{item.sysname}</div>
                        <div className="info-div-item">{item.workflowtype}</div>
                        <div className="info-div-item">{item.workflowcode}</div>
                        </div>

                      </div>
                    </div>
                  </li>
                );
              })}
            </ul>
          </Loading>
        </div>
        {moreCom}
      </div>
    );
  }

  onLoadData(tab, pagenum = 1) {
    const { hpid, subCompanyId, eid, ebaseid } = this.props;
    const { tabid } = tab;
    const params = { hpid, subCompanyId, eid, ebaseid, tabid, tabId: tabid, pagenum };

    this.setState({ loading: true, visible2: false, tab, pagenum });
    API_HOMEPAGE.getWorkflowData(params).then(result => {
      const { data = [] } = result;
      const visible2 = !!(data && data.length);
      this.setState({ loading: false, visible2, result: { data } });
    });

    this.openCallback = false;
    document.removeEventListener('visibilitychange', this.onOpenCallback);
  }

  onLoadMoreData() {
    const { hpid, subCompanyId, eid, ebaseid } = this.props;
    const { tab, pagenum: oldPagenum, result = {} } = this.state;
    const { tabid } = tab;
    const pagenum = oldPagenum + 1;
    const { data: oldData = [] } = result;
    const params = { hpid, subCompanyId, eid, ebaseid, tabid, tabId: tabid, pagenum };

    this.setState({ loading2: true, pagenum });
    API_HOMEPAGE.getWorkflowData(params).then(result => {
      const { data = [] } = result;
      const visible2 = !!(data && data.length);
      const newData = oldData.concat(data);
      this.setState({ loading2: false, visible2, result: { data: newData } });
    });
  }

  onTouchStart(index) {
    const ref = this.refs[`li-${index}`];
    if (ref) {
      ref.style.backgroundColor = '#eee';
    }
  }

  onTouchMove() {
    this.move = true;
  }

  onTouchEnd(index) {
    this.move = false;
    const ref = this.refs[`li-${index}`];
    if (ref) {
      ref.style.backgroundColor = 'transparent';
    }
  }

  onOpenHrm(e, userid) {
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();
    
    window.openLink.openHrm(userid);
  }

  onOpen(url, requestid) {
    if (!this.move) {
      document.addEventListener('visibilitychange', this.onOpenCallback);
      forwardViewPage(url, this.onOpenCallback);
    }
  }

  onOpenCallback() {
    const { tab } = this.state;
    if (!this.openCallback) {
      this.openCallback = true;
      setTimeout(() => this.onLoadData(tab), 100);
    }
  }
}

export default Workflow;
